<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web worker</title>
</head>

<body>
    <button id="startWorker">Start Worker</button>
    <div id="result"></div>
    <script>
        let max = 100
        document.getElementById("startWorker").addEventListener("click", function () {
            // 创建一个新的 Web Worker
            const worker = new Worker("./web-worker.js");
            max = max + 1;
            // 向 worker 发送消息
            worker.postMessage({ message: "Hello from main thread!", id: Math.random(), max });

            // 监听 worker 发送的消息
            worker.onmessage = function (event) {
                const result = event.data;
                document.getElementById("result").textContent = `Received message from worker: ${result}`;
                worker.terminate();
            };
        });
    </script>
</body>

</html>